<template>
  <div>
    <Row>
      <!--Col 左侧公司组织列表 start-->
      <Col :lg="12" :md="12">
        <Card class="warp-card" dis-hover>
          <p slot="title">产品分类</p>
          <Row>
            <Input
              @on-change="getCategoryTree"
              placeholder="输入名称"
              v-model="categoryName"
            />
          </Row>
          <Tree
            :data="treeData"
            :render="renderTree"
            style="height: 485px;overflow-x: scroll"
          ></Tree>
        </Card>
      </Col>

      <!--Modal 添加部门弹窗 start-->
      <Modal
        @on-visible-change="changeVisibleOperationModal"
        title="添加分类"
        v-model="isShowOperationModal"
      >
        <Form :label-width="80">
          <FormItem label="名称" required>
            <Input v-model="categoryParam.category" ></Input>
          </FormItem>
          <FormItem label="描述">
            <Input v-model="categoryParam.categoryDesc" ></Input>
          </FormItem>
          <FormItem label="上级分类" required>
            <Input disabled v-model="categoryParam.parentName" />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="saveAndRefresh()" size="large" type="primary">确定</Button>
          <Button @click="hideDeleteAndOperationModal" size="large" type="error">取消</Button>
        </div>
      </Modal>
      <!--Modal 添加部门弹窗 end-->
       <!--Modal 删除部门弹窗 start-->
      <Modal title="删除确认" v-model="isShowDeleteModal">
        <p style="font-size: 16px;">
          确定要将
          <span style="color: red;font-size: 16px;">{{categoryParam.category}} 分类及子分类</span>
          全部删除吗？
        </p>
        <div slot="footer">
          <Button @click="deleteCategory" size="large" type="primary">确定</Button>
          <Button @click="hideDeleteAndOperationModal" size="large" type="error">取消</Button>
        </div>
      </Modal>
      <!--Modal 删除部门弹窗 end-->
    </Row>
  </div>
  
</template>

<script>
import $ from 'jquery';
import { productCategoryApi } from '@/api/product/product-category';
import { departmentApi } from '@/api/department';
export default {
  name: 'ProductCategoryList',
  components: {
    
  },
  props: {},
  data() {
    return {
      loading: false,
      categoryName: '',
      isShowTree: false,
      // 选中的部门
      selectDepartment: {},
      isShowOperationModal: false,
      isShowDeleteModal: false,
      // 部门参数
      categoryParam: {
        id: '',
        category: '',
        categoryDesc: '',
        parentName: '',
        parentId: '',
        type: 1
      },
      selectEmployeeId: null,
      // 备用的部门参数
      categoryParamBackup: {},
      isShowCompanySettingModal: false,
      treeData: [
        {
          category: '产品分类',
          expand: true,
          render: (h, { root, node, data }) => {
            let newName = data.category;
            if (newName.length > 20) {
              newName = data.category.substring(0, 20) + '...';
            }
            // if (!data || Object.keys(data).length === 0 || !data.id) {
            //   return h('span', newName);
            // }
            return h(
              'Tooltip',
              {
                props: {
                  placement: 'right'
                },
                style: { fontSize: '12px' }
              },
              [
                h(
                  'span',
                  {
                    style: {
                      display: 'inline-block'
                    }
                  },
                  [
                    h('span', [
                      h(
                        'div',
                        {
                          props: {
                            // content:'123',
                            // placement: 'top'
                          },
                          style: { fontSize: '12px' }
                        },
                        [
                          h('Icon', {
                            props: {
                              type: 'md-cube'
                            },
                            style: {
                              marginRight: '8px'
                            }
                          }),
                          h(
                            'Button',
                            {
                              props: Object.assign({}),
                              class: ['departmentSelect'],
                              style: {
                                border: 'none',
                                background: '#ffffff',
                                padding: '4px 5px'
                              },
                              on: {
                                // click: event => {
                                //   console.log('tree click');
                                // }
                              }
                            },
                            newName
                          )
                        ]
                      )
                    ])
                  ]
                ),
                h(
                  'div',
                  {
                    slot: 'content'
                  },
                  [
                    h(
                      'a',
                      {
                        props: {},
                        style: {
                          color: '#fff',
                          margin: '0 5px 5px'
                        },
                        directives: [
                          {
                            name: 'privilege',
                            value: 'add-product-category'
                          }
                        ],
                        on: {
                          click: () => {
                            this.addOrUpdata(data, false);
                          }
                        }
                      },
                      '添加'
                    )
                  ]
                ),
                /*h(
                  'div',
                  {
                    slot: 'content'
                  },
                  [
                    h(
                      'a',
                      {
                        props: {},
                        style: {
                          color: '#fff',
                          margin: '0 5px 5px'
                        },
                        directives: [
                          {
                            name: 'privilege',
                            value: 'update-product-category'
                          }
                        ],
                        on: {
                          click: () => {
                            data.parentId = 0;
                            this.addOrUpdata(data, true);
                          }
                        }
                      },
                      '编辑'
                    )
                  ]
                )*/
              ]
            );
          },
          children: []
        }
      ]
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {},
  mounted() {
    Object.assign(this.categoryParamBackup, this.categoryParam);
    this.getCategoryTree();
    let self = this;
    $('.selectClass').click(event => {
      event = event || window.event;
      event.stopPropagation();
    });

    // 点击层外，隐藏这个层。由于层内的事件停止了冒泡，所以不会触发这个事件
    $(document).click(function(e) {
      self.isShowTree = false;
      $('.departmentWrap').hide();
    });
  },
  methods: {
    // 初始化加载数据
    async getCategoryTree() {
      this.$Spin.show();
      // let result1 = await departmentApi.getListEmployeeByDepartmentName(this.categoryName);
      // console.log(result1);
      let result = await productCategoryApi.getTree(this.categoryName);
      console.log(result);
      this.$Spin.hide();
      if (result.data && result.data.length > 0) {
        this.treeData[0].children = result.data;
      }
      // let data = result.data;
      // this.treeData[0].id = 0;
      // this.treeData[0].name = '产品分类';
      // this.treeData[0].children = [];
      // this.treeData[0].organizationId = [];
      // this.treeData[0].organizationName = [];
      // this.treeData[0].type = 1;
      // if (data && data.length > 0) {
      //   let dateFirst = data[0];
      //   this.treeData[0].id = dateFirst.id;
      //   this.treeData[0].name = dateFirst.name;
      //   this.treeData[0].children = dateFirst.children;
      //   this.treeData[0].organizationId = dateFirst.organizationId;
      //   this.treeData[0].organizationName = dateFirst.organizationName;
      //   this.treeData[0].type = dateFirst.type;
      // }
    },
    // 渲染部门树形图功能按钮
    renderTree(h, { root, node, data }) {
      let newName = data.category;
      if (newName.length > 20) {
        newName = data.category.substring(0, 20) + '...';
      }
      let icon = '';
      if (data.type === 1) {
        icon = 'md-cube';
      } else {
        icon = 'md-menu';
      }
      let buttonList = [
        h(
          'div',
          {
            style: {
              margin: '0 5px 5px 5px'
            }
          },
          [
            h(
              'a',
              {
                props: {},
                style: {
                  color: '#fff',
                  margin: '0 5px 5px'
                },
                directives: [
                  {
                    name: 'privilege',
                    value: 'update-product-category'
                  }
                ],
                on: {
                  click: () => {
                    this.addOrUpdata(data, true);
                  }
                }
              },
              '编辑'
            )
          ]
        ),
        h(
          'div',
          {
            style: {
              margin: '0 5px 5px 5px'
            }
          },
          [
            h(
              'a',
              {
                props: {},
                style: {
                  color: '#fff',
                  margin: '0 5px 5px'
                },
                directives: [
                  {
                    name: 'privilege',
                    value: 'add-product-category'
                  }
                ],
                on: {
                  click: () => {
                    this.addOrUpdata(data, false);
                  }
                }
              },
              '添加'
            )
          ]
        ),
        h(
          'div',
          {
            style: {
              margin: '0 5px 5px 5px'
            }
          },
          [
            h(
              'a',
              {
                props: {},
                style: {
                  color: '#fff',
                  margin: '0 5px 5px'
                },
                directives: [
                  {
                    name: 'privilege',
                    value: 'delete-product-category'
                  }
                ],
                on: {
                  click: () => {
                    this.showDeleteModal(data);
                  }
                }
              },
              '删除'
            )
          ]
        )
      ];

      /*if (data.preId) {
        buttonList.push(
          h(
            'div',
            {
              style: {
                margin: '0 5px 5px 5px'
              }
            },
            [
              h(
                'a',
                {
                  props: {},
                  style: {
                    color: '#fff',
                    margin: '0 5px 5px'
                  },
                  directives: [
                    {
                      name: 'privilege',
                      value: 'delete-department'
                    }
                  ],
                  on: {
                    click: () => {
                      this.upOrDownDepartment(data.id, data.preId);
                    }
                  }
                },
                '上移'
              )
            ]
          )
        );
      }
      if (data.nextId) {
        buttonList.push(
          h(
            'div',
            {
              style: {
                margin: '0 5px 5px 5px'
              }
            },
            [
              h(
                'a',
                {
                  props: {},
                  style: {
                    color: '#fff',
                    margin: '0 5px 5px'
                  },
                  directives: [
                    {
                      name: 'privilege',
                      value: 'delete-department'
                    }
                  ],
                  on: {
                    click: () => {
                      this.upOrDownDepartment(data.id, data.nextId);
                    }
                  }
                },
                '下移'
              )
            ]
          )
        );
      }*/
      /*if (data.parentId && data.parentId !== 1) {
        buttonList.push(
          h(
            'div',
            {
              style: {
                margin: '0 5px 5px 5px'
              }
            },
            [
              h(
                'a',
                {
                  props: {},
                  style: {
                    color: '#fff',
                    margin: '0 5px 5px'
                  },
                  directives: [
                    {
                      name: 'privilege',
                      value: 'delete-department'
                    }
                  ],
                  on: {
                    click: () => {
                      this.upDepartmentGrade(data.id);
                    }
                  }
                },
                '升级'
              )
            ]
          )
        );
      }

      if (data.preId) {
        buttonList.push(
          h(
            'div',
            {
              style: {
                margin: '0 5px 5px 5px'
              }
            },
            [
              h(
                'a',
                {
                  props: {},
                  style: {
                    color: '#fff',
                    margin: '0 5px 5px'
                  },
                  directives: [
                    {
                      name: 'privilege',
                      value: 'delete-department'
                    }
                  ],
                  on: {
                    click: () => {
                      this.downDepartmentGrade(data.id, data.preId);
                    }
                  }
                },
                '降级'
              )
            ]
          )
        );
      }*/
      return h(
        'Tooltip',
        {
          props: {
            placement: 'right'
          },
          style: { fontSize: '12px' }
        },
        [
          h(
            'span',
            {
              style: {
                display: 'inline-block'
              }
            },
            [
              h('span', [
                h(
                  'div',
                  {
                    props: {
                      // content:'123',
                      // placement: 'top'
                    },
                    style: { fontSize: '12px' }
                  },
                  [
                    h('Icon', {
                      props: {
                        type: icon
                      },
                      style: {
                        marginRight: '8px'
                      }
                    }),
                    h(
                      'Button',
                      {
                        props: Object.assign({}),
                        class: ['departmentSelect'],
                        style: {
                          border: 'none',
                          background: '#ffffff',
                          padding: '4px 5px'
                        },
                        on: {
                          click: event => {
                            console.log('11');
                            // this.loadEmployeeTable(event, root, node, data);
                          }
                        }
                      },
                      newName
                    )
                  ]
                )
              ])
            ]
          ),
          h(
            'div',
            {
              slot: 'content'
            },
            buttonList
          )
        ]
      );
    },
    // 添加或编辑部门 并显示弹窗
    addOrUpdata(data, update) {
      if (update) {
        this.categoryParam = Object.assign({}, data);
      } else {
        this.categoryParam = {
          parentName: data.category,
          parentId: data.id,
          type: 1
        };
      }
      this.isShowOperationModal = true;
    },
     // 添加部门弹窗 显示隐藏监听
    changeVisibleOperationModal(showStatus) {
      if (!showStatus) {
        $('.departmentWrap').hide();
      }
    },
    // 关闭模态框
    hideDeleteAndOperationModal() {
      this.isShowDeleteModal = false;
      this.isShowOperationModal = false;
    },
    // 获取部门数据
    async saveAndRefresh() {
      if (!this.categoryParam.category) {
        this.$Message.error('名称不能为空');
        return;
      }
      this.$Spin.show();
      let result;
      if (this.categoryParam.id) {
        result = await productCategoryApi.update(this.categoryParam);
      } else {
        result = await productCategoryApi.add(this.categoryParam);
      }
      this.$Spin.hide();
      this.$Message.success('操作成功');
      this.getCategoryTree();
      this.hideDeleteAndOperationModal();
      // this.hideCompanySettingModal();
    },
    // 显示删除弹窗
    showDeleteModal(val) {
      let data;
      if (!val) {
        data = Object.assign({}, this.departmentGroup[0]);
      } else {
        data = Object.assign({}, val);
      }
      this.categoryParam = {
        id: data.id,
        category: data.category
      };
      this.isShowDeleteModal = true;
    },
    // 删除部门
    async deleteCategory() {
      this.$Spin.show();
      let result = await productCategoryApi.delete(
        this.categoryParam.id
      );
      this.$Message.success('删除成功');
      this.$Spin.hide();
      this.getCategoryTree();
      this.hideDeleteModal();
    },
    // 关闭删除弹窗
    hideDeleteModal() {
      this.categoryParam = Object.assign({}, this.categoryParamBackup);
      this.isShowDeleteModal = false;
    },
  }
};
</script>
<style lang="less" scoped>
.ivu-tree-children {
  cursor: pointer;
  width: 100%;
}
.option-department {
  font-size: 14px;
  padding: 5px;
  cursor: pointer;
}
.option-department:hover {
  background-color: rgba(5, 170, 250, 0.2);
}
.departmentWrap {
  position: absolute;
  background-color: #ffffff;
  padding: 5px;
  border: 1px solid #dedede;
  width: 100%;
  z-index: 9;
  display: none;
  height: 250px;
  overflow-y: scroll;
}
</style>